<!-- 配料核对-明细-->
<template>
    <view class="container">
        <!-- 顶部标题 -->
        <TopBar title="配料核对-明细-条码"></TopBar>

        <!-- 显示内容区域 -->
        <!-- 输入内容区域 -->
        <view class="top-input">
            <!-- 第一行 -->
            <view class="top-input-date">
                <view class="top-input-date-title">配料单</view>
                <view top-input-date-inputbox>
                    <input class="top-input-date-input" placeholder="" />
                </view>
            </view>

            <!-- 条码显示按钮 -->
            <!-- <view class="top-input-date  button-container">
                <view class="top-input-date-btn">
                    <checkbox value="cb" selectedColor="#3399FF" class="function-input1-checkbox" :checked="true" />核对
                </view>
                <view class="top-input-date-btn">
                    <checkbox value="cb" selectedColor="#3399FF" class="function-input1-checkbox" :checked="true" />投料
                </view>
                <view class="top-input-date-btn">
                    <checkbox value="cb" selectedColor="#3399FF" class="function-input1-checkbox" :checked="true" />刷新
                </view>
            </view> -->

            <!-- 工艺刷新按钮 -->
            <!-- <view class="top-input-date  button-container-gongyi">
                <view class="top-input-date-btn">
                    刷新
                </view>
            </view> -->
            <!-- 物料刷新按钮 -->
            <view class="top-input-date  button-container-gongyi">
                <view class="top-input-date-btn">
                    刷新
                </view>
            </view>
        </view>
        <!-- 显示列表区域 -->
        <view class="top-list">
            <!-- 三个按钮 -->
            <view class="top-list-btn">
                <view class="top-list-btn-item top-list-btn-item-left" :class="currentTab === 'barcode' ? 'active' : ''"
                    @click="changeTab('barcode')">条码</view>
                <view class="top-list-btn-item  top-list-btn-item-center"
                    :class="currentTab === 'process' ? 'active' : ''" @click="changeTab('process')">工艺</view>
                <view class="top-list-btn-item  top-list-btn-item-right"
                    :class="currentTab === 'material' ? 'active' : ''" @click="changeTab('material')">物料</view>
            </view>



               <keep-alive :max="3">
         
            <scroll-view scroll-top="0" scroll-y="true" class="scroll-Y" style="height: 500px;">
                <!-- 配料核对-明细-条码 -->
                <view v-show="currentTab === 'barcode'" scroll-y="true">
                    <view class="top-list-title" v-for="i in 9" :key="i">
                        <view class="top-list-title-item">
                            <view class="top-list-title-item-title">
                                22122342131412
                            </view>
                            <view class="top-list-title-item-title"> 行1项 </view>
                        </view>
                        <view class="top-list-title-item">
                            <view class="top-list-title-item-title">
                                <checkbox value="cb" selectedColor="#3399FF" class="function-input1-checkbox"
                                    :checked="true" />核对
                            </view>
                            <view class="top-list-title-item-title">
                                <checkbox value="cb" selectedColor="#3399FF" class="function-input1-checkbox"
                                    :checked="true" />投料
                            </view>
                        </view>
                        <view class="top-list-title-item">
                            <view class="top-list-title-item-title">
                                编码
                            </view>
                            <view class="top-list-title-item-title">名称 </view>
                        </view>
                        <view class="top-list-title-item">
                            <view class="top-list-title-item-title">
                                RM199932
                            </view>
                            <view class="top-list-title-item-title"> RM199932@ff </view>
                        </view>

                    </view>
                </view>
                <!-- 配料核对-明细-工艺 -->
                <view v-show="currentTab === 'process'" scroll-y="true" >
                    <view class=" top-list-title-gongyi"  v-for="i in 9" :key="i">
                        <view class="top-list-title-item-gongyi-title">
                            <view class="top-list-title-item-title">
                                作业工序<text style=" padding-left:5px;color: aqua;">1</text>
                            </view>

                        </view>
                        <view class=" top-list-title-item-gongyi">
                            <view class="top-list-title-item-title-gongyi-left" style="color: green;">
                                工艺说明
                            </view>
                            <view class="top-list-title-item-title-gongyi-right">A项 加热75--85CA项 加热75--85CA项 加热75--85CA项
                                加热75--85CA项 加热75--85CA项 加热75--85CA项 加热75--85CA项 加热75--85CA项 加热75--85CA项 加热75--85C
                            </view>
                        </view>
                        <view class=" top-list-title-item-gongyi">
                            <view class="top-list-title-item-title-gongyi-left" style="color: red;">
                                作业过程
                            </view>
                            <view class="top-list-title-item-title-gongyi-right">从a到b </view>
                        </view>
                        <view class=" top-list-title-item-gongyi">
                            <view class="top-list-title-item-title-gongyi-left" style="color: yellow;">
                                注意事项
                            </view>
                            <view class="top-list-title-item-title-gongyi-right"> 小心腐蚀 </view>
                        </view>
                        <view class=" top-list-title-item-gongyi">
                            <view class="top-list-title-item-title-gongyi-left" style="color: blue;">
                                备注
                            </view>
                            <view class="top-list-title-item-title-gongyi-right"> 不可食用 </view>
                        </view>

                    </view>
                </view>
                <!-- 配料核对-明细-物料 -->
                   <view  v-show="currentTab === 'material'" scroll-y="true">
                <view class="top-list-title-wuliao" v-for="i in 9" :key="i">
                    <view class="top-list-title-item-wuliao">
                        <view class="top-list-title-item-title-wuliao wuliao-hang">
                            <view>行</view>
                            <view>1</view>
                            <view>项</view>
                            <view>A1</view>

                        </view>
                        <view class="top-list-title-item-title-wuliao"> 投料KG </view>
                    </view>
                    <view class="top-list-title-item-wuliao">

                        <view class="top-list-title-item-title-wuliao">M51321(66a) </view>

                    </view>
                    <view class="top-list-title-item-wuliao">
                        <view class="top-list-title-item-title-wuliao ">
                            <view>参数范围 <text>100-200</text></view>

                        </view>
                    </view>
                    <view class="top-list-title-item-wuliao">
                        <view class="top-list-title-item-title-wuliao">
                            <view>实际值 <text>100</text></view>
                        </view>
                        <view class="top-list-title-item-title-wuliao"> 称重量<text>100</text> </view>
                    </view>
                    <view class="top-list-title-item-wuliao">
                        <view class="top-list-title-item-title-wuliao">
                            <checkbox value="cb" selectedColor="#3399FF" class="function-input1-checkbox"
                                :checked="true" />流量控制
                        </view>
                        <view class="top-list-title-item-title-wuliao">
                            <checkbox value="cb" selectedColor="#3399FF" class="function-input1-checkbox"
                                :checked="true" />是否完成
                        </view>
                    </view>
                </view>
                </view>
            </scroll-view>
            </keep-alive>
        </view>
    </view>
</template>

<script setup lang="ts">
import TopBar from "@/components/TopBar.vue"
import { ref } from 'vue';

// 添加选项卡切换变量和处理函数
const currentTab = ref('barcode'); // 当前选中的标签，默认'barcode'（条码）

// 切换标签的方法
const changeTab = (tab: string) => {
    currentTab.value = tab;
    // 这里可以添加加载对应数据的逻辑
};

const materialList = ref([
    {
        id: 1,                      // 唯一标识，就像商品的条形码
        materialCode: 'MAT001',     // 物料编码：系统内物料唯一编号
        materialName: '乳化剂A-102', // 物料名称：生产中实际使用的名称
        batchNo: 'B2023101501',     // 批次号：同一批生产的物料标识
        requiredQty: 50.5,          // 需求数量：工单要求的使用量
        unit: 'kg',                 // 单位：计量方式
        scannedQty: 50.5,           // 已扫描数量：实际已核对的数量
        status: 'completed'         // 状态：completed-已完成，pending-待核对
    },
    {
        id: 2,
        materialCode: 'MAT002',
        materialName: '稳定剂B-301',
        batchNo: 'B2023101602',
        requiredQty: 20.0,
        unit: 'kg',
        scannedQty: 15.5,
        status: 'pending'
    },
    {
        id: 3,
        materialCode: 'MAT003',
        materialName: '香精C-004',
        batchNo: 'B2023101701',
        requiredQty: 5.2,
        unit: 'L',
        scannedQty: 5.2,
        status: 'completed'
    },
    {
        id: 4,
        materialCode: 'MAT004',
        materialName: '色素D-205',
        batchNo: 'B2023101803',
        requiredQty: 1.5,
        unit: 'kg',
        scannedQty: 0,
        status: 'pending'
    }
]);
</script>
<style scoped>

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    /* justify-content: center; */
    min-height: 500px;
    overflow: hidden;
    /* 3. 隐藏容器溢出内容 */
    background-color: #F7F3F1;
    /* background-image: url("/src/static/log/Loginbg3.png"); */
    background-size: 100% 100%;
}

.top-input {
    width: 87%;
    height: auto;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
}

/* // 设置日期输入区域为弹性布局 */
.top-input-date {
    display: flex;
    /* // 设置子元素水平排列 */
    flex-direction: row;


    /* // 设置子元素在交叉轴上居中对齐 */
    align-items: center;

    margin: 10px 0px;
}

.top-input-date-title {
    width: 100px;
    /* 固定标题宽度，就像书架的隔板宽度统一 */
    text-align: left;
    /* 文字右对齐，视觉上更整齐 */
    padding-right: 10px;
    /* 标题和输入框之间留间隙 */
}

.top-input-date-input {
    height: 40px;
    border: 1px solid #000;
    border-radius: 20px;
    padding-left: 20px;
    margin-right: 0px;

}

.button-container {
    display: flex;
    /* 启用Flex布局，类似设置书架为可调节模式 */
    justify-content: space-between;
    /* 两端对齐，第一个放左边，最后一个放右边 */
}

.button-container-gongyi {
    display: flex;
    /* 启用Flex布局，类似设置书架为可调节模式 */
    justify-content: center;
    /* 两端对齐，第一个放左边，最后一个放右边 */
}

/* 可选：给按钮添加间距，避免太靠近边缘 */
.top-input-date-btn {
    margin: 0 5px;
    /* 按钮左右各留5px间隙 */
}

.top-input-date-btn {
    background-color: rgb(3, 194, 208);
    width: 100px;
    height: 40px;
    border: 1px solid #000;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 显示列表区域 最外*/
.top-list {
    width: 100%;

    margin-top: 20px;

}

/* //三个按钮 */
.top-list-btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.top-list-btn-item {
    width: 40%;
    height: 40px;
    background-color: #fff;
    /* border: 1px solid #000; */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 最左边 */
.top-list-btn-item-left {
    border-radius: 20px 0px 0px 0px;
    border-radius: 20px 0px 0px 0px;
    border-bottom: 1px solid #8f8a8a;
    border-right: 1px solid #8f8a8a;
}

/* 中间 */
.top-list-btn-item-center {
    border-bottom: 1px solid #8f8a8a;
    border-right: 1px solid #8f8a8a;
}

/* 最右边 */
.top-list-btn-item-right {
    border-radius: 0px 20px 0px 0px;
    border-bottom: 1px solid #8f8a8a;
}

/* 条码列表*/
.top-list-title {
    padding: 10px 10px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 10px;

}

.top-list-title-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    /* 设置宽度为100% */

}

.top-list-btn-item.active {
    background-color: #3399FF;
    /* 蓝色背景表示选中状态 */
    color: white;
    /* 白色文字 */
    font-weight: bold;
    /* 加粗文字 */
    border-bottom: none;
    /* 移除底部边框 */
}

.top-list-title-item>view {
    flex: 1;
    /* 让子元素平均分宽度 */
}

.top-list-title-item-title {
    text-align: center;
}

/* 工艺列表 */
.top-list-title-gongyi {
    padding: 10px 40px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 10px;

}

.top-list-title-item-gongyi {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #8f8a8a;
    padding: 5px 0px;

}

.top-list-title-item-gongyi-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #8f8a8a;
    padding-bottom: 10px;

}

.top-list-title-item-title-gongyi-left {
    width: 70px;
    /* 1. 设置固定宽度（根据最长标题调整） */
    padding-right: 30px;
    /* 2. 标题和内容之间保留间距 */
    white-space: nowrap;
    /* 3. 禁止标题文本换行 */
}

.top-list-title-item-title-gongyi-right {
    width: auto;
}

/* 物料 */
.top-list-title-wuliao {
    padding: 10px 10px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 10px;

}

.top-list-title-item-wuliao {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    /* 设置宽度为100% */

}

.top-list-title-item-wuliao>view {
    flex: 1;
    /* 让子元素平均分宽度 */
}

.wuliao-hang {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.top-list-title-item-title-wuliao {
    text-align: center;
}
</style>